<template>
	<div class="home-container">
		<!-- 主要内容区域 -->
		<main class="home-main">
			<div class="content-wrapper">
				<!-- 欢迎区域 -->
				<section class="welcome-section">
					<div class="welcome-card">
						<h1 class="welcome-title">欢迎来到 TATA树洞</h1>
						<p class="welcome-subtitle">
							让TaTa陪你，走过成长中的四季心情
						</p>

						<div class="user-info-card">
							<h3 class="info-title">你的信息</h3>
							<div class="info-grid">
								<div class="info-item">
									<span class="info-label">姓名：</span>
									<span class="info-value">{{
										userInfo?.name
									}}</span>
								</div>
								<div class="info-item">
									<span class="info-label">学校：</span>
									<span class="info-value">{{
										userInfo?.school
									}}</span>
								</div>
								<div class="info-item">
									<span class="info-label">班级：</span>
									<span class="info-value">{{
										userInfo?.class
									}}</span>
								</div>
								<div class="info-item">
									<span class="info-label">学号：</span>
									<span class="info-value">{{
										userInfo?.studentId
									}}</span>
								</div>
							</div>
						</div>
					</div>
				</section>

				<!-- 功能卡片区域 -->
				<section class="features-section">
					<h2 class="section-title">快速入口</h2>

					<div class="feature-cards">
						<!-- 心理测量表 -->
						<div
							class="feature-card card-primary"
							@click="goToQuiz"
						>
							<div class="card-icon">📋</div>
							<h3 class="card-title">心理测量表</h3>
							<p class="card-desc">
								开始你的心理能力测评，共7种能力测试
							</p>
							<el-button type="primary" class="card-btn">
								开始测试
							</el-button>
						</div>

						<!-- 报告查询 -->
						<div
							class="feature-card card-secondary"
							@click="handleViewReport"
						>
							<div class="card-icon">📊</div>
							<h3 class="card-title">报告查询</h3>
							<p class="card-desc">
								查看你的心理测评报告和历史记录
							</p>
							<el-button class="card-btn"> 查看报告 </el-button>
						</div>

						<!-- 树洞倾诉 -->
						<div class="feature-card card-accent">
							<div class="card-icon">💬</div>
							<h3 class="card-title">树洞倾诉</h3>
							<p class="card-desc">
								向TaTa说出你的心事，释放你的情绪
							</p>
							<el-button class="card-btn"> 开始倾诉 </el-button>
						</div>
					</div>
				</section>

				<!-- 最近活动 -->
				<section class="activity-section">
					<h2 class="section-title">最近活动</h2>
					<div class="activity-list">
						<div class="activity-item">
							<div class="activity-icon">✨</div>
							<div class="activity-content">
								<h4 class="activity-title">
									欢迎加入 TATA树洞
								</h4>
								<p class="activity-time">刚刚</p>
							</div>
						</div>
					</div>
				</section>
			</div>
		</main>

		<!-- 装饰背景 -->
		<div class="background-decoration">
			<div class="floating-leaves">
				<div
					v-for="leaf in leaves"
					:key="leaf.id"
					class="leaf"
					:style="leaf.style"
				></div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

// 定义用户信息类型
interface UserInfo {
	name: string
	school: string
	class: string
	studentId: string
}

// 定义叶子类型
interface Leaf {
	id: number
	style: {
		left: string
		animationDelay: string
		animationDuration: string
	}
}

// 响应式数据
const router = useRouter()
const userInfo = ref<UserInfo | null>(null)
const leaves = ref<Leaf[]>([])

// 生命周期
onMounted(() => {
	// 获取用户信息
	const savedUserInfo = localStorage.getItem('userInfo')
	if (savedUserInfo) {
		userInfo.value = JSON.parse(savedUserInfo)
	} else {
		// 如果没有用户信息，跳转到登录页
		ElMessage.warning('请先登录')
		router.push('/')
		return
	}

	// 生成浮动叶子
	generateLeaves()
})

// 生成浮动叶子
const generateLeaves = () => {
	leaves.value = Array.from({ length: 12 }, (_, i) => ({
		id: i,
		style: {
			left: `${Math.random() * 100}%`,
			animationDelay: `${Math.random() * 5}s`,
			animationDuration: `${Math.random() * 3 + 3}s`,
		},
	}))
}

// 跳转到测试页面
const goToQuiz = () => {
	router.push('/quiz')
}

// 查看报告
const handleViewReport = () => {
	router.push('/report')
}
</script>

<style scoped>
.home-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 50%, #a5d6a7 100%);
	position: relative;
	overflow: hidden;
}

/* 主要内容 */
.home-main {
	position: relative;
	z-index: 10;
	padding: 40px 20px;
}

.content-wrapper {
	max-width: 1200px;
	margin: 0 auto;
}

/* 欢迎区域 */
.welcome-section {
	margin-bottom: 40px;
}

.welcome-card {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 24px;
	padding: 40px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(20px);
	text-align: center;
}

.welcome-title {
	font-size: 36px;
	font-weight: bold;
	color: #2c3e50;
	margin-bottom: 12px;
	background: linear-gradient(135deg, #8bc34a 0%, #4caf50 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.welcome-subtitle {
	font-size: 18px;
	color: #666;
	margin-bottom: 32px;
}

.user-info-card {
	background: linear-gradient(135deg, #f5f7fa 0%, #e8f5e8 100%);
	border-radius: 16px;
	padding: 24px;
	margin-top: 24px;
}

.info-title {
	font-size: 20px;
	font-weight: 600;
	color: #2c3e50;
	margin-bottom: 20px;
	text-align: left;
}

.info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	text-align: left;
}

.info-item {
	display: flex;
	align-items: center;
	padding: 12px;
	background: white;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.info-label {
	font-size: 14px;
	color: #666;
	font-weight: 500;
}

.info-value {
	font-size: 16px;
	color: #2c3e50;
	font-weight: 600;
	margin-left: 8px;
}

/* 功能卡片 */
.features-section {
	margin-bottom: 40px;
}

.section-title {
	font-size: 28px;
	font-weight: bold;
	color: #2c3e50;
	margin-bottom: 24px;
	text-align: center;
}

.feature-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
}

.feature-card {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 20px;
	padding: 32px;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(20px);
}

.feature-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
}

.card-primary:hover {
	box-shadow: 0 16px 40px rgba(139, 195, 74, 0.3);
}

.card-secondary:hover {
	box-shadow: 0 16px 40px rgba(76, 175, 80, 0.3);
}

.card-accent:hover {
	box-shadow: 0 16px 40px rgba(158, 189, 111, 0.3);
}

.card-icon {
	font-size: 48px;
	margin-bottom: 16px;
}

.card-title {
	font-size: 24px;
	font-weight: bold;
	color: #2c3e50;
	margin-bottom: 12px;
}

.card-desc {
	font-size: 14px;
	color: #666;
	line-height: 1.6;
	margin-bottom: 24px;
	min-height: 42px;
}

.card-btn {
	width: 100%;
	height: 40px;
	border-radius: 12px;
	font-weight: 600;
}

/* 最近活动 */
.activity-section {
	margin-bottom: 40px;
}

.activity-list {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 20px;
	padding: 24px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(20px);
}

.activity-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	border-radius: 12px;
	background: linear-gradient(135deg, #f5f7fa 0%, #e8f5e8 100%);
}

.activity-icon {
	font-size: 32px;
	flex-shrink: 0;
}

.activity-content {
	flex: 1;
}

.activity-title {
	font-size: 16px;
	font-weight: 600;
	color: #2c3e50;
	margin-bottom: 4px;
}

.activity-time {
	font-size: 14px;
	color: #999;
}

/* 背景装饰 */
.background-decoration {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: hidden;
}

.floating-leaves {
	position: absolute;
	width: 100%;
	height: 100%;
}

.leaf {
	position: absolute;
	width: 20px;
	height: 20px;
	background: linear-gradient(135deg, #8bc34a 0%, #4caf50 100%);
	border-radius: 0 100% 0 100%;
	opacity: 0.3;
	animation: float-leaf 5s infinite ease-in-out;
}

@keyframes float-leaf {
	0%,
	100% {
		transform: translateY(0) rotate(0deg);
		opacity: 0.3;
	}
	50% {
		transform: translateY(-30px) rotate(180deg);
		opacity: 0.6;
	}
}

/* 响应式设计 */
@media (max-width: 1024px) {
	.feature-cards {
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	}
}

@media (max-width: 768px) {
	.welcome-card {
		padding: 24px;
	}

	.welcome-title {
		font-size: 28px;
	}

	.welcome-subtitle {
		font-size: 16px;
	}

	.info-grid {
		grid-template-columns: 1fr;
	}

	.feature-cards {
		grid-template-columns: 1fr;
	}

	.section-title {
		font-size: 24px;
	}
}

@media (max-width: 480px) {
	.welcome-title {
		font-size: 24px;
	}

	.card-title {
		font-size: 20px;
	}
}
</style>
